<template>
    <div class="recharge">
        <div class="container">
            <section class="pnel orderlists">
                <dl>
                    <dd v-for="(item,index) in matchlists" :key="index">{{item.home}} vs {{item.visitor}}</dd>
                </dl>
                <span>{{mobile}}</span>
            </section>
            <section class="pnel moneylist">
                <ul>
                    <li>
                        <label for="" class="labname">订单金额</label> <strong>{{bean}}彩豆</strong>
                    </li>
                    <li>
                        <label for="" class="labname">抵扣余额</label> <strong>-{{balanceBean}}彩豆</strong>
                    </li>
                </ul>
            </section>
            <section class="pnel moneylist" v-show="payableBean>0">
                <ul>
                    <li>
                        <label for="" class="labname">应&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;付</label>
                        <strong
                                class="red">{{payableBean}}彩豆</strong>
                    </li>
                </ul>
            </section>
            <Payselect ref="payselectnode" v-if="payableBean>0"/>
            <span class="redme"><img src="http://common-1253410441.file.myqcloud.com/activityimg/20171211171529.png"
                                     alt=""><strong>阅读并同意《懂彩帝用户服务条款》</strong></span>
        </div>
        <myButton text="立即支付" :clickfn="submitfn"/>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import {getPlanIdInfoR, postOrderR, sendOrderR, payRechargeR} from '../../service/security';
    import {getMytoken} from '../../service/common';
    import Payselect from '../../components/Payselect.vue';
    import {isiOS, closeThisPage} from '../../uitls/common';
    import store from 'store2';
    import TDbridge from '../../uitls/bridge/index';
    import {paytypefn} from '../../uitls/securitypay';
    export default {
        components: {
            myButton: Button,
            DomLoad, Payselect
        },
        data() {
            return {
                planId: 0,
                matchlists: [],
                balanceBean: 0,
                bean: 0,
                buyId: 0,
                payableBean: 0,
                mobile: '***'
            };
        },
        created() {
            this.planId = this.$route.params.planId;
            this.getplanInfoById(this.planId);
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            async getplanInfoById(planId){
                const {token, mobile}= await getMytoken();
                if(!token) {
                    this.$vux.toast.text('未登录');
                    return;
                }
                this.token = token;
                this.mobile = mobile;
                const {data}=await getPlanIdInfoR({token, planId});
                if(data && data.code === 0) {
                    this.matchlists = data.data.matches;
                }
                this.getorderinfo();
            },
            async submitfn(){
                const {token, buyId, payableBean}=this;
                if(payableBean > 0) {
                    const senddata = {};
                    const {ID, Code}= this.$refs.payselectnode.getSelectedType();
                    const params = {
                        UserIDGuid: token,
                        PayTypeCode: ID,
                        Code: Code,
                        Money: payableBean,
                        SchemeID: buyId,
                        ReturnUrl: encodeURIComponent(`${location.origin}/#/security/payresult`),
                        IsAndroid: !isiOS() ? 1 : 0
                    };
                    const {data} = await payRechargeR(params);
                    if(data && data.code === 0) {
                        store('payinfoDate', {PayNumber: data.msg, SchemeID: buyId});//存本地
                        paytypefn({Code, data, that: this, senddata});
                    }
                    else {
                        this.$vux.toast.text(data.msg);
                    }
                }
                else {
                    const {data}=await sendOrderR({token, buyId});
                    if(data && data.code === 0) {
                        //TODO 自己h5这边要处理一波
                        closeThisPage();
                    }
                    else {
                        this.$vux.toast.text(data.msg);
                    }
                }


            },
            async getorderinfo(){
                const {token, planId}=this;
                const {data}= await postOrderR({token, planId});
                if(data && data.code === 0) {
                    this.balanceBean = data.data.balanceBean;
                    this.bean = data.data.bean;
                    this.buyId = data.data.buyId;
                    this.payableBean = data.data.payableBean;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .recharge {
        display: flex;
        flex-direction: column;
        height: 100%;
        .container {
            flex: 1;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
        }
    }

    .pnel {
        margin-bottom: 20px;
        background: #fff;
        color: #333;
        dl {
            dd {

            }
        }
    }

    .orderlists {
        padding: 20px 33px;
        dl {
            font-size: @fz30;
            dd {
            }
        }
        span {
            font-size: @fz28;
            color: @color3;
            margin-top: 16px;
            display: block;
        }
    }

    .moneylist {
        ul {
            padding: 0 30px;
            li {
                height: 126px;
                line-height: 126px;
                border-bottom: 1px solid @color12;
                display: flex;
                font-size: @fz32;
                .red {
                    color: @color22;
                }
                .labname {
                    flex: 1;
                    text-indent: 10px;
                }
                strong {
                }
                &:last-child {
                    border: none;
                }
            }
        }
    }

    .paytype {
        padding: 0 24px;
        h6 {
            height: 86px;
            font-size: @fz30;
            display: block;
            line-height: 120px;
        }
        ul {

            li {
                height: 140px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid @color12;
                &:last-child {
                    border: none;
                }
                img {
                    width: 78px;
                    height: 78px;
                    margin-right: 30px;
                }
                aside {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    span {
                        font-size: @fz36;
                    }
                    strong {
                        font-size: @fz26;
                        color: @color3;
                    }
                }
                &.selected {
                    svg {
                        color: @color22;
                    }
                }
                svg {
                    color: #ddd;
                    width: 45px;
                    height: 45px;
                }
            }
        }
    }

    .redme {
        display: flex;
        align-items: center;
        margin: 32px;
        img {
            width: 32px;
            height: 28px;
            margin-right: 20px;
        }
        strong {
            font-size: @fz24;
            color: @color3;
        }
    }

</style>